<template>
  <div class="Start">
    <div class="title">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">首页介绍</el-menu-item>
      <el-menu-item index="2" @click="Search_">游客模式</el-menu-item>
      <el-menu-item index="3" @click="Login_">登陆/注册</el-menu-item>
    </el-menu>
    </div>
    
       <div class="Show"><!--设置轮播图-->
      <el-carousel :interval="4000" trigger="click" height="100vh" >
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img :src="item.idView" class="image" width="100%" height="100%" space >
      </el-carousel-item>
      </el-carousel>
    </div>
  </div>
    

   
  
  
</template>
  
<script>
export default {
  name: "SearchOne",
  data() {
    return {
      activeIndex: "1",
      imagebox:[
        /*{id:0,idView:require('../assets/imagebox/1_.jpg')},*/
        {id:1,idView:require('../assets/imagebox/3.png')},
        {id:2,idView:require('../assets/imagebox/2.png')},
        {id:3,idView:require('../assets/imagebox/4.png')}
        //imagebox是assets下一个放图片的文件夹
        

      ],
       // 浏览器宽度
      screenWidth :0
    };
  },
  
  methods: {
    
    Login_() {
      this.$router.push("/Login");
    },
    Search_() {
      this.$router.push("/Search");
    },
    setSize:function () {
          // 通过浏览器宽度(图片宽度)计算高度
          this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
  },
   mounted() {
              // 首次加载时,需要调用一次
              this.screenWidth =  window.innerWidth;
              this.setSize();
              // 窗口大小发生改变时,调用一次
              window.onresize = () =>{
              this.screenWidth =  window.innerWidth;
              this.setSize();
            }
      }
}
</script>
<style>
* {
        margin:0;
        padding:0;
      }
 
.el-carousel__item h3 {
  color: #de7118;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #0562e5;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>